(function () {
    var container = document.querySelector('.container')
    var first = document.querySelector('.first')
    var last = document.querySelector('.last')


    // 悬浮清除边框,清除下一个节点元素的右边框
    // 第一个
    first.addEventListener('mouseover', function () {
        this.style.cssText = `
    box-shadow: inset 0px 0px 20px 1px rgba(0, 0, 0, 0.25);
    background-color: #f6b37f;
    `;
        this.firstChild.style.cssText = `border-right:1px solid transparent;`
        this.nextElementSibling.firstChild.style.cssText = `border-left: 1px solid transparent;`
    })
    first.addEventListener('mouseout', function () {
        this.style.backgroundColor = '#facd89'
        this.style.cssText = "box-shadow:none;"
        this.firstChild.style.cssText = `border-right: 1px solid #e9e2d7;`
        this.nextElementSibling.firstChild.style.cssText = `border-left:1px solid #e9e2d7;`
    })

    // 悬浮清除边框，后分别清除上/下节点元素的左/右边框
    // 其它
    for (i = 1; i < container.children.length - 1; i++) {
        container.children[i].addEventListener('mouseover', function () {
            this.style.cssText = `
    box-shadow: inset 0px 0px 20px 1px rgba(0, 0, 0, 0.25);
    background-color: #f6b37f;
    `;
            this.firstChild.style.cssText = `
        border-left:1px solid transparent;
        border-right:1px solid transparent;
        `;
            this.previousElementSibling.firstChild.style.cssText = `border-right:1px solid transparent;`
            this.nextElementSibling.firstChild.style.cssText = `border-left:1px solid transparent;`

        })
        container.children[i].addEventListener('mouseout', function () {
            this.style.backgroundColor = '#facd89'
            this.style.cssText = "box-shadow:none;"
            this.firstChild.style.cssText = `
                                 border-right:1px solid #e9e2d7;
                                 border-left:1px solid #e9e2d7;
        `
            this.previousElementSibling.firstChild.style.cssText = `border-right:1px solid #e9e2d7;`
            this.nextElementSibling.firstChild.style.cssText = `border-left:1px solid #e9e2d7;`
        })
    }

    // 悬浮清除边框,清除上一个节点元素的左边框
    // 最后一个
    last.addEventListener('mouseover', function () {
        this.style.cssText = `
    box-shadow: inset 0px 0px 20px 1px rgba(0, 0, 0, 0.25);
    background-color: #f6b37f;
    `;
        this.firstChild.style.cssText = `border-left:1px solid transparent;`
        this.previousElementSibling.firstChild.style.cssText = `border-right: 1px solid transparent;`
    })
    last.addEventListener('mouseout', function () {
        this.style.backgroundColor = '#facd89'
        this.style.cssText = "box-shadow:none;"
        this.firstChild.style.cssText = `border-left: 1px solid #e9e2d7;`
        this.previousElementSibling.firstChild.style.cssText = `border-right:1px solid #e9e2d7;`
    })

})()